<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_2855974_9khnedgkd9u.css" />
		<style>
			table,
			th,
			td {
				border: 2px solid #000000;
				border-collapse: collapse;
				width: 1000px;
				height: 40px;
				text-align: center;
				margin: auto;
			}

			thead {
				background-color: #D3D3D3;
			}

			tbody tr:hover {
				background-color: #f4f4f4;
			}

			.productImg {
				width: 80px;
				height: 80px;
				transition: transform 0.5s linear 0.1s;
			}

			.productImg:hover {
				transform: rotateY(360deg);
			}

			.icon-gouwuchekong,
			.icon-shanchu {
				color: #000000
			}

			.icon-gouwuchekong:hover,
			.icon-shanchu:hover {
				color: #FF0000;
			}

			.itemNum {
				text-align: center;
				width: 20px;
			}
		</style>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			$(function() {
				$(".icon-gouwuchekong").click(function() {
					//添加商品到购物车
					var productName = $(this).parent().parent().children(":first").text();
					var productPrice = $(this).parent().prev().text();
					$("#cartData").append("<tr><td><input type='checkbox' class='cartItemCb'/></td><td>" +
						productName + "</td><td><img class='productImg' src='../img/" + productName +
						".png' /></td><td>" + productPrice +
						"</td><td><input type='button' value='－'/> <input type='text' value='1' class='itemNum'/> <input type='button' value='＋'/><td>" +
						productPrice + "</td><td><a href='#' class='iconfont icon-shanchu'></a></td></tr>");
				});

				//Jquery的click(),或者on('click',function(){})函数动态绑定事件时,只能绑定页面上已有的元素,新添加的元素无法绑定
				$(".icon-shanchu").on("click",function() {
					alert(111);
					/* var r = confirm("是否要删除?");
					if (r) {

					} */
				});
			});
		</script>
	</head>
	<body>
		<div class="container">
			<div class="productList">
				<table>
					<caption>商品列表</caption>
					<thead>
						<tr>
							<th>商品名称</th>
							<th>商品图片</th>
							<th>商品价格</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>小米12pro</td>
							<td>
								<img class="productImg" src="../img/小米12pro.png" />
							</td>
							<td>4699</td>
							<td>
								<a href="#" class="iconfont icon-gouwuchekong"></a>
							</td>
						</tr>
						<tr>
							<td>小米12x</td>
							<td>
								<img class="productImg" src="../img/小米12x.png" />
							</td>
							<td>2999</td>
							<td>
								<a href="#" class="iconfont icon-gouwuchekong"></a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<br />
			<div class="shoppingCart">
				<table>
					<caption>购物车</caption>
					<thead>
						<tr>
							<th>
								<input type="checkbox" />
							</th>
							<th>商品名称</th>
							<th>商品图片</th>
							<th>商品单价</th>
							<th>商品数量</th>
							<th>商品小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="cartData">
						<tr></tr>
					</tbody>
					<tfoot>
						<tr>
							<th colspan="7">购物车总价为: ?</th>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</body>
</html>
